<template>
  <div>
    <h1>pinia的使用</h1>
    <h2>{{ count }}</h2>
    <h2>{{ doubleCount }}</h2>
    <button @click="add(1)">add</button>
    <button @click="asyncAdd(2)">async add</button>
    <SonComp :money="100"/>
  </div>
</template>

<script setup lang="ts">
import SonComp from './components/SonComp.vue';
import { useCounterStore } from './store/counter';
import { storeToRefs } from 'pinia';

/**
 * reactive对象 解构 - 丢失响应式  => toRefs解决
 * store对象 解构 - 丢失响应式 => storeToRefs解决
 * 
 * 在js里面获取数据
 * 解构前 counterStore.count  解构后 count.value
 * 模板里面使用
 * 解构前 counterStore.count  解构后 count
 */
const counterStore = useCounterStore()
const {count , doubleCount} = storeToRefs(counterStore)
const {add, asyncAdd} = counterStore
console.log(count.value);
/**
 * 1. 方法想要解构，直接从store里解构就可以了，不要在storeToRefs解构 方法不是响应式数据
 * 2. 组件当中如何共享状态 修改状态
 *      引入import store 随便获取数据 随便改
 * 3. defineStroe(id, 回调函数) => id是唯一标识 他会体现在调试工具里
 */
</script>

<style scoped>

</style>

